<template>
	<view class="content">
		<view class="topbanner">
			<view class="top_left">
				<image :src="currentPlayIcon" mode="aspectFill"></image>
				<view class="top_left_title"> {{ currentPlayTitle }} </view>
			</view>
			<view class="top_right">
				<image :src="playButtonImageSrc" mode="aspectFill" @click="changeTooglePlayState()"></image>
				<uni-countdown ref="countdownTimer" start="true" :show-day="false" :hour="countdownHour" :minute="countdownMinute" :second="countdownSecond" @timeup="countdownComplete()" color="#FFFFFF" backgroundColor=$zm-main-color splitorColor="#FFFFFF"></uni-countdown>
				<view class="top_right_button" @click="showChooseTime"> 更改定时时间</view>
			</view>
		</view>
		<v-tabs v-model="currentSelectedTab" :tabs="tabs" :scroll="false" @change="changeTab" bgColor=$zm-main-color color="#C4C4C4" activeColor="#FFFFFF" lineColor="#FF4040"></v-tabs>
		<view class="music_list">
			<view class="music_item" v-for="(item,index) in musicList" :key="index" @click="chooseVideoItem(index)">
				<image :src=item.icon mode="aspectFill"></image>
				<view class="music_title"> {{ item.name }} </view>
			</view>
		</view>
		<xp-picker ref="picker" mode="his" value="00:30:00" history="true" @confirm="confirm"></xp-picker>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				/* 当前选择的tab */
				currentSelectedTab: 0,
				/* tabs分类列表 */
				tabs: ['助眠雨声','木柴风雪','脑波助眠'],
				/* 后端请求的音频数据列表 */
				musicList:[],
				/* 当前选中的是哪一个音频 */
				currentSelectedMusic: 0,
				/* 倒计时的---时 */
				countdownHour: 0,
				/* 倒计时的---分 */
				countdownMinute: 30,
				/* 倒计时的---秒 */
				countdownSecond: 0,
				/* 背景音频播放器 */
				bgAudioManager: null,
				/* inner音频播放器 */
				innerAudioManager: null,
				/* 右上角播放按钮的图片地址 */
				playButtonImageSrc: "",
				/* 当前播放按钮的状态 */
				playButtonState: true,
				/* 音频是否停止 */
				musicIsStop: false,
				/* 左上角当前播放的标题 */
				currentPlayTitle: "",
				/* 左上角当前播放的图片 */
				currentPlayIcon: ""
			};
		},
		onLoad() {
			console.log("页面加载了")
			this.changeTab(this.currentSelectedTab)
			// #ifdef MP-WEIXIN
			this.initBgAudioManager();
			// #endif
			
			// #ifdef MP-TOUTIAO
			this.initInnerAudioManager();
			// #endif
		},
		watch: {
			playButtonState() {
				// 改变播放按钮图片
				this.changePlayButtonImage()
				// 改变背景音频播放状态 && 改变倒计时状态
				if (this.playButtonState) {
					if (this.musicIsStop) {
						this.chooseVideoItem(this.currentSelectedMusic);
					} else {
						// #ifdef MP-WEIXIN
						this.bgAudioManager.play();
						// #endif
						
						// #ifdef MP-TOUTIAO
						this.innerAudioManager.play();
						// #endif
						
					}
					this.$refs.countdownTimer.play();
				} else {
					// #ifdef MP-WEIXIN
					this.bgAudioManager.pause();
					// #endif
					
					// #ifdef MP-TOUTIAO
					this.innerAudioManager.pause();
					// #endif
					
					this.$refs.countdownTimer.pause();
				}
			}
		},
		methods: {
			/* 切换选中的tab */
			changeTab(index) {
				console.log("当前选中的tab：" + index)
				let type = (index + 1) * 100
				var that = this;
				this.$api.get_music_list({"type":type}).then((res)=>{
					that.musicList = res.data.filter((item)=>{
						return item.type === (type + "")
					});
					that.playButtonState = true;
					that.changePlayButtonImage();
					that.chooseVideoItem(0);
				}).catch((err)=>{
					console.log(err)
				})
			},
			/* 选择某一个cell */
			chooseVideoItem(index) {
				this.currentSelectedMusic = index;
				let musicItem = this.musicList[index];
				this.playVideoWithUrlAndName(musicItem.music, musicItem.name);
				// 更改播放按钮的状态
				this.playButtonState = true;
				// 更改左上角的数据
				this.currentPlayIcon = musicItem.icon;
				this.currentPlayTitle = musicItem.name;
			},
			/* 倒计时完成 */
			countdownComplete() {
				console.log("倒计时完成");
				// #ifdef MP-WEIXIN
				this.bgAudioManager.stop();
				// #endif
				
				// #ifdef MP-TOUTIAO
				this.innerAudioManager.stop();
				// #endif
				
			},
			/* 展示时间选择器 */
			showChooseTime() {
				this.$refs.picker.show()
			},
			/* 时间选择器上的确认按钮 */
			confirm(e) {
				let array = e.value.split(':')
				this.countdownHour = array[0],
				this.countdownMinute = array[1],
				this.countdownSecond = array[2],
				this.$refs.countdownTimer.play();
			},
			/* 右上角 播放 暂停 按钮*/
			changeTooglePlayState() {
				// 改变播放状态
				this.playButtonState = !this.playButtonState;
			},
			/* 初始化音频播放器 */
			initBgAudioManager() {
				this.bgAudioManager = uni.getBackgroundAudioManager();
				this.bgAudioManager.singer = '九萌助眠';
				this.bgAudioManager.coverImgUrl = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png';
				
				var that = this;
				this.bgAudioManager.onPlay(() => {
					console.log("onPlay")
					that.playButtonState = true;
					that.musicIsStop = false;
				});
				this.bgAudioManager.onPause(function(){
					console.log("onPause")
					that.playButtonState = false;
				});
				this.bgAudioManager.onStop(function(){
					console.log("onStop")
					that.playButtonState = false;
					that.musicIsStop = true;
				});
				this.bgAudioManager.onEnded(() => {
					console.log("onEnded")
					that.playButtonState = false;
					that.chooseVideoItem(that.currentSelectedMusic);
				});
			},
			/* 开始播放音频，需要音频的url和名称 */
			playVideoWithUrlAndName(url, name) {
				// #ifdef MP-WEIXIN
				this.bgAudioManager.src = url;
				this.bgAudioManager.title = name;
				// #endif
				
				// #ifdef MP-TOUTIAO
				if (this.innerAudioManager.paused === false) {
					this.innerAudioManager.pause();
				}
				this.innerAudioManager.src = url;
				this.playButtonState = true;
				// #endif
			},
			/* 更改 播放 暂停 按钮的图片 */
			changePlayButtonImage() {
				if (this.playButtonState) {
					this.playButtonImageSrc = "../../static/pause.png";
				} else {
					this.playButtonImageSrc = "../../static/play.png";
				}
			},
			/* 初始化音频播放器 为了抖音用 */
			initInnerAudioManager() {
				this.innerAudioManager = uni.createInnerAudioContext();
				this.innerAudioManager.autoplay = true;
				
				var that = this;
				this.innerAudioManager.onPlay(() => {
					console.log("innerAudioManager------onPlay")
					that.playButtonState = true;
					that.musicIsStop = false;
				});
				this.innerAudioManager.onPause(function(){
					console.log("innerAudioManager----onPause")
					that.playButtonState = false;
				});
				this.innerAudioManager.onStop(function(){
					console.log("innerAudioManager-----onStop")
					that.playButtonState = false;
					that.musicIsStop = true;
				});
				this.innerAudioManager.onEnded(() => {
					console.log("innerAudioManager----onEnded")
					that.playButtonState = false;
				});
			}

		}
	}
</script>

<style lang="scss">
	.content {
		background-color: $zm-main-color;
	}
	.topbanner {
		height: 400rpx;
		display: flex;
		justify-content: center;
		.top_left {
			margin-top: 50rpx;
			margin-right: 50rpx;
			text-align: center;
			image {
				width: 200rpx;
				height: 200rpx;
			}
			.top_left_title {
				margin-top: 20rpx;
				color: #FFFFFF;
				font-size: 35rpx;
			}
		}
		.top_right {
			margin-top: 50rpx;
			margin-left: 50rpx;
			text-align: center;
			image {
				width: 135rpx;
				height: 135rpx;
			}
			.top_right_button {
				margin-top: 25rpx;
				color: #FFFFFF;
				font-size: 35rpx;
			}
		}
	}
	
	.music_list {
		margin: 25rpx 0;
		display: flex;
		flex-wrap: wrap;
		.music_item {
			width: 187.5rpx;
			height: 187.5rpx;
			margin-top: 15rpx;
			text-align: center;
			image {
				margin-top: 15rpx;
				width: 60rpx;
				height: 60rpx;
			}
			.music_title {
				margin-top: 10rpx;
				font-size: 30rpx;
				color: #C4C4C4;
			}
		}
	}
	
	
</style>
